<template>
	<view
		:style="{ 'padding-bottom': bottomHeight + tabBarHeight + 'px' }"
		:class="[contentFlex ? 'h-full border-box flex flex-column' : '']"
	>
		<c-title-bar hidden is-static v-if="!hideTitleBar" />
		<view class="flex-1 flex flex-column" v-if="contentFlex">
			<slot />
			<view class="py-6-2 text-center">
				<logo :width="100" />
			</view>
		</view>
		<view v-else>
			<slot />
			<view class="py-6-2 text-center">
				<logo :width="100" />
			</view>
		</view>
		<view v-if="hasBottom" class="page-bottom fixed inset-x-0" :style="{ bottom: tabBarHeight + 'px' }">
			<slot name="bottom" />
		</view>
		<tab-bar :current="current" @load="handleTabBarLoad" />
	</view>
</template>

<script>
import { onMounted, ref, getCurrentInstance } from 'vue';
export default {
	props: {
		contentFlex: Boolean,
		current: Number,
		hideTitleBar: Boolean,
		hasBottom: Boolean,
	},
	setup(props, ctx) {
		const { ctx: _ctx } = getCurrentInstance();
		uni.hideTabBar({
			animation: false,
		});
		const bottomHeight = ref(0);
		const tabBarHeight = ref(0);
		function handleTabBarLoad(e) {
			tabBarHeight.value = e.height;
			ctx.emit('tabBarLoad', e);
		}
		onMounted(() => {
			if (props.hasBottom) {
				uni
					.createSelectorQuery()
					.in(_ctx)
					.select('.page-bottom')
					.boundingClientRect((data) => {
						if (data) {
							bottomHeight.value = data.height;
						}
					})
					.exec();
			}
		});
		return {
			tabBarHeight,
			bottomHeight,
			handleTabBarLoad,
		};
	},
};
</script>

<style>
page {
	height: 100%;
}
</style>
